<template>
  <el-container>
    <el-header>
      <div id="logo">
        <router-link class="el-icon-s-home" to="/admin">Malater后台管理</router-link>
      </div>
    </el-header>
    <el-container>
      <el-aside width="200px">
        <el-row>
          <el-col :span="24">
            <el-menu
              default-active="2"
              class="el-menu-vertical-demo"
              background-color="#545c64"
              text-color="#fff"
              active-text-color="#ffd04b"
              router>
              <el-submenu index="1">
                <template slot="title">
                  <i class="el-icon-s-opportunity"></i>
                  <span>界面管理</span>
                </template>
                  <el-menu-item index="viewPage">轮播图管理</el-menu-item>
                  <el-menu-item index="menuTtem">菜单项管理</el-menu-item>
              </el-submenu>
<!-- ======================================================================================================= -->
              <el-submenu index="2">
                <template slot="title">
                  <i class="el-icon-location"></i>
                  <span>教务管理</span>
                </template>
                <el-menu-item index="RepairIndex">重修管理</el-menu-item>
              </el-submenu>
<!-- ======================================================================================================= -->
              <el-submenu index="3">
                <template slot="title">
                  <i class="el-icon-s-check"></i>
                  <span>校内管理</span>
                </template>
                <el-menu-item index="PhoneList">校园电话簿</el-menu-item>
              </el-submenu>
            </el-menu>
          </el-col>
        </el-row>
      </el-aside>
      <el-main>
        <router-view/>
      </el-main>
    </el-container>
  </el-container>
</template>

<script>
export default {
  name: 'Main',
  methods: {
  }
}
</script>

<style scoped>
  .el-container {
    height: 100%;
    padding: 0;
    margin: 0;
    width: 100%;
  }
  .el-header {
    background-color: rgba(55, 68, 101, 0.76);
    color: #FFF;
  }
  .el-aside {
    background-color: #545c64;
    color: #333;
  }
  .el-main {
    background-color: #e9eef3;
    color: #333333;
  }
  #logo > a {
    font-size: 22px;
    color: #00fab6;
    margin: 20px 10px;
  }
</style>
